<template>
  <view class="page">
    <view class="search-bar">
      <view class="search-input">
        <input type="text" v-model="keywords" placeholder="请输入被访人姓名/手机号搜索" />
        <image class="icon-search" src="/static/images/icon_search.png" mode=""></image>
        <view class="search-button" @click="search">搜索</view>
      </view>
    </view>
    <!-- <view class="search" style="height: 60px">
			<u-search v-model="keywords" @custom="search" @search="search" height="80" placeholder="请输入被访人姓名/手机号搜索"></u-search>
		</view> -->
    <scroll-view class="scroll-list" scroll-y="true" @scrolltolower="loadMore">
      <view class="message-list">
        <view v-for="(item, index) in list" :key="index" class="message-item" @click="handleProcess(item)">
          <view class="message-item-hd">{{ item.createTime }}</view>
          <view class="message-item-bd">
            <view class="message-title">
              受访人 {{ item.intervieweeName }}
            </view>
            <view class="message-desc">
              事由：{{ item.enterReason }}
            </view>
            <view class="message-desc">
              日期：{{ item.startTime}}~{{ item.endTime}}
            </view>
          </view>
          <view class="message-item-ft">
            <view v-if="item.curProcTaskDefKey === 'Activity_Initiator'" class="message-cancel"
              @click="handleProcess(item)">重新提交</view>
            <view v-if="item.processStatus === 'running'" class="message-cancel" @click="handleStop(item)">取消</view>
            <view v-if="item.processStatus === 'completed' && item.bmldspResult === '1'" class="message-cancel"
              @click="toGatePass(item)">通行证</view>
          </view>
          <view class="message-status">{{getVisitorStatusObject(item).text}}</view>
        </view>
      </view>
      <!-- <view class="uni-list" v-for="(item, index) in list" :key="index"
        style="margin-top: 5rpx; margin-bottom: 5rpx;padding-left: 12rpx;padding-right: 12rpx;"
        @click="handleProcess(item)">
        <u-row gutter="16" style="margin-top: 20rpx">
          <u-col span="9">
            <view style="text-align: left; color: gray">
              {{ item.createTime }}
            </view>
          </u-col>
          <u-col span="3" style="text-align: right">
            <view style="text-align: right; color: gray; margin-right: 10rpx">
              <u-tag :text="getVisitorStatusObject(item).text" :type="getVisitorStatusObject(item).type"
                shape="circle"></u-tag>
            </view>
          </u-col>
        </u-row>
        <u-row gutter="16" style="margin-top: 20rpx">
          <u-col span="12"
            style="word-break: break-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden">
            日期：{{ item.startTime}}~{{ item.endTime}}
          </u-col>
        </u-row>
        <u-row gutter="16" style="margin-top: 20rpx">
          <u-col span="12"
            style="word-break: break-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden">
            受访人：{{ item.intervieweeName }}
          </u-col>
        </u-row>
        <u-row gutter="16" style="margin-top: 20rpx">
          <u-col span="12"
            style="word-break: break-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden">
            事由：{{ item.enterReason }}
          </u-col>
        </u-row>
        <u-row gutter="16" style="margin-top: 20rpx; margin-bottom: 10rpx;margin-right: 5rpx;">
          <u-col span="12" style="text-align: right;">
            <u-button v-if="item.curProcTaskDefKey === 'Activity_Initiator'" size="mini" shape="circle" plain
              type="primary" @click="handleProcess(item)" style="margin-right: 10rpx;">重新提交</u-button>
            <u-button v-if="item.processStatus === 'running'" size="mini" shape="circle" plain type="warning"
              @click="handleStop(item)">取消</u-button>
            <u-button v-if="item.processStatus === 'completed' && item.bmldspResult === '1'" size="mini" shape="circle"
              plain type="success" @click="toGatePass(item)">通行证</u-button>
          </u-col>
        </u-row>
      </view> -->
      <u-loadmore class="loadmore" :status="loadStatus"></u-loadmore>
    </scroll-view>
    <!-- <view class="btn-plus" style="opacity: 1" @click="toInitAppointment">
      <u-icon name="plus-circle-fill" size="100" color="#3d87ff" label="发起预约" label-pos="bottom"></u-icon>
    </view> -->
    <view class="add-btn" @click="toInitAppointment">
      <image src="/static/images/icon_add_message.png" mode=""></image>
    </view>
  </view>
</template>
<script>
  import $time from '@/common/time.js';
  import interceptMixin from '@/pages/extAccess/flow/visitor/mixins/interceptMixin.js';

  export default {
    mixins: [interceptMixin()],
    data() {
      return {
        keywords: '',
        status: '',
        query: {
          current: 1,
          size: 10
        },
        list: [],
        pages: 0,
        loadStatus: 'loadmore',
        options: [],
        headStyle: {
          fontWeight: 'bold',
          color: '#606266',
          margin: '16rpx'
        },
        statusList: [],
        swiperCurrent: 0
      };
    },
    onLoad(params) {
      // Mock测试地址：http://localhost:2888/pages/extAccess/login/socialLogin?code=1111&state=11111
      // vuex_loginSource值为2，vuex_account的值则为登录微信公众号的open_id
      this.loadList();
    },
    onShow() {
      // console.log("onShow.");
      // if(uni.getStorageSync("refreshVisitorList") === true){
      // 	uni.removeStorageSync("refreshVisitorList");
      // 	this.search();
      // }
    },
    computed: {},
    methods: {
      navTo(url) {
        uni.navigateTo({
          url: url
        });
      },
      search(value) {
        this.list = [];
        this.query.current = 0;
        this.loadList();
      },
      loadList() {
        if (!this.isWechatMpLogin()) {
          this.handleNotWechatMpLogin();
          return;
        }
        this.query.keywords = this.keywords;
        this.query.openId = this.vuex_account;
        this.$u.api.wflow.business.visitorOuterNetApi.list(this.query).then((res) => {
          if (!res.data.records || res.data.records.length == 0) {
            this.loadStatus = 'nomore';
            return;
          }
          res.data.records.forEach((item) => {
            item.show = false;
            this.specialHandleStartEndTime(item);
          });
          this.list = this.list.concat(res.data.records);
          this.pages = res.pages;
          this.query.current = res.data.current;
          this.query.size = res.data.size;
          this.loadStatus = 'loadmore';
        });
      },
      /**
       * 高版本IOS，日期格式（yyyy-mm-dd hh:MM）会出现NaN-NaN-NaN兼容性问题
       * 
       * 特殊处理开始时间与结束时间的格式
       * 
       * @param {Object} item
       */
      specialHandleStartEndTime(item) {
        let startTime = item.startTime;
        if (startTime) {
          startTime = startTime.substring(0, startTime.lastIndexOf(':'));
          item.startTime = startTime;
        }
        let endTime = item.endTime;
        if (endTime) {
          endTime = endTime.substring(0, endTime.lastIndexOf(':'));
          item.endTime = endTime;
        }
      },
      loadMore() {
        this.loadStatus = 'loading';
        setTimeout(() => {
          this.query.current += 1;
          this.loadList();
        }, 100);
      },
      getContent(value) {
        let res = value
          .replace(/<.+?>/g, '')
          .replace(/&nbsp;/gi, '')
          .replace(/\s/gi, '');
        return res;
      },
      handleDelete(row) {
        let self = this;
        uni.showModal({
          title: '提示',
          content: '确认要删除该数据吗,删除后无法恢复？',
          showCancel: true,
          success: function(res2) {
            if (res2.confirm) {
              self.$u.api.message.msgTemplate.delete({
                ids: row.id
              }).then((res) => {
                self.$u.toast('删除成功！');
                self.search();
              });
            }
          }
        });
      },
      change(index) {
        this.list = [];
        this.query.current = 0;
        this.swiperCurrent = index;
        this.loadList();
      },
      loadStatusList() {
        this.$u.api
          .dictBizData({
            code: 'status_type'
          })
          .then((res) => {
            let list = [];
            let json = {
              label: '全部',
              value: ''
            };
            list.push(json);
            res.data.forEach((item) => {
              list.push({
                label: item.dictValue,
                value: item.dictKey
              });
            });
            this.statusList = list;
            this.loadList();
          });
      },
      handleClick(row) {
        let id = row.id;
        let mode = 'view';
        let navigateBackUrl = 'pages/extAccess/flow/visitor/index';
        this.$u.route({
          url: 'pages/extAccess/flow/visitor/form',
          params: {
            id,
            mode,
            navigateBackUrl
          },
        })
      },
      getVisitorStatusObject(item) {
        let type = 'primary';
        let text = '审批中';
        let processStatus = item.processStatus;
        let curProcTaskDefKey = item.curProcTaskDefKey;
        // 1:同意、0或空：不同意
        let bmldspResult = item.bmldspResult;
        if (processStatus === 'completed' && bmldspResult === '1') {
          type = 'success';
          text = '通过';
        } else if (processStatus === 'running' && curProcTaskDefKey === 'Activity_Initiator') {
          type = 'warning';
          text = '驳回';
        } else if (processStatus === 'canceled') {
          type = 'error';
          text = '已取消';
        }
        let statusObject = {
          type,
          text
        };
        return statusObject;
      },
      toInitAppointment() {
        let navigateBackUrl = 'pages/extAccess/flow/visitor/index';
        this.$u.route({
          url: 'pages/extAccess/flow/visitor/form',
          params: {
            navigateBackUrl
          },
        })
      },
      handleProcess(row) {
        // debugger;
        let procInsId = row.processInstanceId;
        let taskId = row.curProcTaskId || '0';
        let navigateBackUrl = 'pages/extAccess/flow/visitor/index';
        this.$u.route({
          url: 'pages/extAccess/flow/visitor/form',
          params: {
            procInsId,
            taskId,
            navigateBackUrl
          },
        })
      },
      /**  取消流程申请 */
      handleStop(row) {
        let procInsId = row.processInstanceId;
        const params = {
          procInsId
        };
        let vm = this;
        uni.showModal({
          title: '提示',
          content: '是否要取消当前申请？',
          showCancel: true,
          success: function(res) {
            if (res.confirm) {
              vm.$u.api.wflow.business.visitorOuterNetApi.stopProcess(params).then((res) => {
                vm.$u.toast(res.msg);
                vm.search();
              });
            }
          }
        });
      },
      toGatePass(row) {
        let id = row.id;
        let navigateBackUrl = 'pages/extAccess/flow/visitor/index';
        this.$u.route({
          url: 'pages/extAccess/flow/visitor/gatePass',
          params: {
            id,
            navigateBackUrl
          },
        })
      },
    }
  };
</script>
<style lang="scss">
  .page {
    position: relative;
    background: #F7F7F7;
  }

  .search-bar {
    display: flex;
    align-items: center;
    padding: 16rpx 32rpx;
    background: #fff;
  }

  .search-input {
    position: relative;
    width: 100%;
    height: 64rpx;
    border-radius: 32rpx;
    background: #F7F7F7;
    overflow: hidden;

    input {
      width: 100%;
      height: 64rpx;
      border: 0;
      padding: 0 144rpx 0 64rpx;
      outline: 0;
      line-height: 64rpx;
      font-size: 24rpx;
      font-weight: 500;
      color: #999;
      background: transparent;
    }

    .icon-search {
      position: absolute;
      top: 21rpx;
      left: 21rpx;
      width: 22rpx;
      height: 22rpx;
    }

    .search-button {
      position: absolute;
      top: 0;
      right: 0;
      width: 144rpx;
      border-radius: 32rpx;
      line-height: 64rpx;
      text-align: center;
      font-size: 24rpx;
      font-weight: 700;
      color: #fff;
      background: #3989FC;
    }
  }

  .scroll-list {
    height: calc(100vh - var(--window-top) - var(--window-bottom) - 96rpx);

    .loadmore {
      padding: 32rpx;
    }
  }

  .message-list {
    display: flex;
    flex-direction: column;
    padding: 24rpx 24rpx 0;
  }

  .message-item {
    position: relative;
    width: 100%;
    border-radius: 8rpx;
    padding: 32rpx;
    margin-top: 24rpx;
    background: #fff;
  }

  .message-item-hd {
    margin-bottom: 32rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #666;
  }

  .message-item-ft {
    display: flex;
    justify-content: flex-end;
    margin-top: 32rpx;
  }

  .message-title {
    margin-bottom: 24rpx;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 32rpx;
    font-weight: 700;
    color: #333;
    overflow: hidden;
  }

  .message-desc {
    display: flex;
    align-items: center;
    margin-bottom: 16rpx;
    font-weight: 500;
    font-size: 28rpx;
    color: #999;
  }

  .message-cancel {
    display: inline-block;
    border-radius: 56rpx;
    padding: 0 28rpx;
    line-height: 56rpx;
    text-align: center;
    font-size: 24rpx;
    font-weight: 500;
    color: #fff;
    background: #D43030;
  }

  .message-status {
    position: absolute;
    top: 28rpx;
    right: 32rpx;
    display: inline-block;
    border-radius: 24rpx;
    padding: 0 24rpx;
    line-height: 48rpx;
    text-align: center;
    font-size: 24rpx;
    font-weight: 500;
    color: #3989FC;
    background: #DEEBFE;
  }

  .add-btn {
    position: absolute;
    right: 32rpx;
    bottom: 288rpx;
    z-index: 99;
    width: 88rpx;
    height: 88rpx;

    image {
      width: 88rpx;
      height: 88rpx;
      vertical-align: top;
    }
  }
</style>